<template>
	<!-- 添加银行卡 -->
	<view class="bigbox pb220">
		<!-- 头部图片 -->
		<view class="flex row-center mt32">
			<image src="/static/img/my/addcard.png" class="w330 h355"></image>
		</view>
		<!-- /头部图片 -->

		<!-- 表格 -->
		<u-form :model="form" ref="uForm" label-width="200" label-position='top'>
			<u-form-item label="持卡人：" prop="name">
				<u-input v-model="form.name" placeholder="持卡人姓名" />
			</u-form-item>
			<u-form-item label="所属银行" prop="bank">
				<u-input type="select" :select-open="selectShow" v-model="form.bank_name" placeholder="请选择"
					@click="selectShow = true"></u-input>
			</u-form-item>
			<u-form-item label="银行卡号：" placeholder="请输入银行卡号">
				<u-input v-model="form.bank_card_no" />
			</u-form-item>
			<u-form-item label="手机号：">
				<u-input v-model="form.iphone" placeholder="请输入手机号码"/>
			</u-form-item>
		</u-form>
		<!-- /表格 -->
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>

		<view class="mr56 h86 paybtn" @tap="submit">
			立即提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					bank_name: '',
					bank_card_no: '',
					iphone: ''
				},
				selectShow: false,
				selectList: [{
						value: '建设银行',
						label: '建设银行'
					},
					{
						value: '农业银行',
						label: '农业银行'
					},
					{
						value: '工商银行',
						label: '工商银行'
					}
				],
			};
		},
		onLoad(opt) {
			if(opt.detail){
				this.form = JSON.parse(opt.detail)
			}
		},
		methods: {
			// 选择银行类型回调
			selectConfirm(e) {
				console.log(e)
				this.form.bank_name = e[0].value;

			},
			submit() {
				this.$api.addBankCard(this.form).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.paybtn {
		width: 80%;
		position: fixed;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		z-index: 99;
	}
</style>
